<template>
  <div class="fixed-header fixed-footer">
    <x-header in-app-close>最近开奖</x-header>

    <div v-for="p in prizes">
      <sticky top="3.3333rem" :z-index="9">
        <div class="relative clickable text-light font-sm bg-grey px-3 py-1 bb-l" @click="p.show = !p.show">
          <b>{{p.matchDate}} {{p.week}}</b>
          <b>有{{p.num}}场比赛</b>
          <i class="iconfont icon-arrow-up absolute-middle animate r-3" :class="p.show ? '' : 'flip'"></i>
        </div>
      </sticky>

      <div class="bg-white p-3 bb-l" v-show="p.show" v-for="m in p.matches">

        <div class="text-grey font-sm px-4">
          <b v-text="m.week + m.matchNo + ' ' + m.leagueShort"></b>
          <b class="float-right" v-text="m.matchTime"></b>
        </div>

        <div class="font-xl text-center relative py-2 mx-5">
          <em class="absolute-middle l-0" v-text="m.hostShort"></em>
          <strong class="align-middle" :class="colors[m.wflResult]">{{m.bf}}</strong>
          <small class="text-grey ml-1">({{m.halfBf}})</small>
          <em class="absolute-middle r-0" v-text="m.guestShort"></em>
        </div>

        <div class="d-flex text-center b-l">
          <div class="odds-item">
            <div v-text="m.wflText"></div>
            <small v-text="m.wflOdds"></small>
          </div>
          <div class="odds-item">
            <div v-text="m.fixedText"></div>
            <small v-text="m.fixedOdds"></small>
          </div>
          <div class="odds-item">
            <div v-text="m.bfResult"></div>
            <small v-text="m.bfOdds"></small>
          </div>
          <div class="odds-item">
            <div v-text="m.ballsResult"></div>
            <small v-text="m.ballsOdds"></small>
          </div>
          <div class="odds-item">
            <div v-text="m.hwText"></div>
            <small v-text="m.hwOdds"></small>
          </div>
        </div>
      </div>

    </div>
    <footer class="bg-white text-center p-2 bt-l">
      <a @click="jump('/jingcai')" class="btn btn-danger">继续选择本彩种</a>
    </footer>
  </div>
</template>

<script>
import Sticky from '../widgets/sticky'
import { jump } from '../../router'
import http from '../../http'

const colors = {
  3: 'text-red',
  1: 'text-green',
  0: 'text-blue'
}

export default {
  components: {Sticky},
  name: 'jingcai-prizes',
  data: () => ({
    loading: false,
    prizes: [],
    colors
  }),
  beforeRouteEnter (to, from, next) {
    http.post('/jingcai/prizes', to.query).then(prizes => {
      next(vm => {
        vm.prizes = prizes.map(p => {
          p.show = true
          return p
        })
      })
    })
  },
  methods: {jump}
}
</script>

<style lang="scss">
  @import "../../assets/css/theme";
  .odds-item {
    padding: .35rem 0;
    flex-grow: 1;
  }
  .odds-item:not(last-child) {
    border-right: .5px solid $color-grey-light;
  }
</style>
